<template>
  <page-layout>
    <template v-slot:header>
      <el-button size="small" type='primary' @click="saveEvt">保存</el-button>
      <el-button size="small" @click="cancleEvt">取消</el-button>
    </template>
    <el-form :model="sample" size="small" label-width="100px" :rules="rules">
      <el-row>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item label="样品名字" prop="name">
            <el-input v-model="sample.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item label="产品名称" prop="product_name">
            <el-input v-model="sample.product_name" readonly>
              <template #append>
                <el-button @click="show = true" type='primary' icon="el-icon-edit-outline"
                  style="background:#409EFF;color: aliceblue;" />
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item label="开售时间">
            <el-date-picker v-model="sample.sale_stime" type="date" placeholder="选择上架日期" disabled />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item label="下架时间">
            <el-date-picker v-model="sample.sale_etime" type="date" placeholder="选择下架日期" disabled />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item label="类型">
            <el-select v-model="sample.type" disabled placeholder="">
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item label="单位">
            <el-select v-model="sample.unit" disabled placeholder="">
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item label="品级">
            <el-select v-model="sample.level" disabled placeholder="">
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item label="产地">
            <el-input v-model="sample.place" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-form-item label="品牌">
            <el-input v-model="sample.brand" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="详情" :key="sample.detail.length">
            <el-tag style="margin: 0 10px 10px 0;" v-for="tag in sample.detail" :key="tag"
              @close="closeEvt(tag, 'detail')" closable>
              {{ tag }}
            </el-tag>
            <el-button size="small" @click="filePickEvt('detail')" icon='el-icon-upload2' />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="banner">
            <el-tag style="margin: 0 10px 10px 0;" v-for="tag in sample.banner" :key="tag"
              @close="closeEvt(tag, 'banner')" closable>
              {{ tag }}
            </el-tag>
            <el-button size="small" @click="filePickEvt('banner')" icon='el-icon-upload2' />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="备注">
            <el-input v-model="sample.remark" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <samplePicter v-model="show" @pickDataEvt="pickDataEvt" />
  </page-layout>
</template>

<script>
import { fileUploadApi } from '@/apis/productApi'
import { filePicker } from '@/utils'
import { sampleUpdateApi, sampleAddApi } from '../../../../apis/sampleApi'
import samplePicter from './samplePicter.vue'
export default {
  components: { samplePicter },
  data() {
    return {
      sample: {
        "name": "",
        "product_id": "",
        "product_name": "",
        "sale_stime": "",
        "sale_etime": "",
        "type": "",
        "unit": "",
        "level": "",
        "place": "",
        "brand": "",
        "detail": [],
        "banner": [],
        "remark": ""
      },
      rules: {
        name: [{ required: true, message: '样品名字必须填写' }],
        product_name: [{ required: true, message: '产品名字必必须选择' }]
      },
      show: false,
      tableData: [],
      isEdit: false
    }
  },
  created() {
    // 判断是编辑还是新增
    this.isEdit = !!this.$route.query.id
    if (this.isEdit) {
      this.sample = this.$route.query
      this.sample.banner = this.sample.banner ? this.sample.banner.split('--') : []
      this.sample.detail = this.sample.detail ? this.sample.detail.split('--') : []
    }
  },
  methods: {
    // 选择产品后赋值
    pickDataEvt(rows) {
      this.sample.product_name = rows.name
      this.sample.product_id = rows.id
      this.sample.sale_stime = rows.sale_stime
      this.sample.sale_etime = rows.sale_etime
      this.sample.type = rows.type
      this.sample.unit = rows.unit
      this.sample.level = rows.level
      this.sample.place = rows.place
      this.sample.brand = rows.brand
      this.show = false
    },
    // 保存按钮调用接口
    async saveEvt() {
      if (!!this.isEdit) {
        let result = await sampleUpdateApi({
          ...this.sample, banner: this.sample.banner ? this.sample.banner.join('--') : '',
          detail: this.sample.detail ? this.sample.detail.join('--') : ''
        })
        if (result.code !== 200) {
          this.$message.error('保存失败，原因：' + result.message)
          return
        }
        this.$message.success('保存样品成功')
        this.$router.push('/product/sample/list')
       } else {
        let result = await sampleAddApi({
          ...this.sample, banner: this.sample.banner ? this.sample.banner.join('--') : '',
          detail: this.sample.detail ? this.sample.detail.join('--') : ''
        })
        if (result.code !== 200) {
          this.$message.error('新增失败，原因：' + result.message)
          return
        }
        this.$message.success('新增样品成功')
        this.$router.push('/product/sample/list')
      }
    },
    closeEvt(tag, type) {
      this.sample[type] = this.sample[type].filter(it => it !== tag)
    },
    cancleEvt() {
      this.$router.back()
    },
    // 文件上传
    filePickEvt(type) {
      filePicker(files => {
        let formData = new FormData()
        Array(files.length).fill().forEach((_, i) => {
          formData.append('file', files[i])
        })
        // 调用接口
        fileUploadApi('sample_' + type, formData).then(d => {
          if (d.code === 200) {
            this.sample[type] = this.sample[type].concat(
              d.data.map(it => it.path)
            )
          }
        })
      })
    },
  }
}
</script>
